iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0
Modern Web

勇者Jason和前端之鑰系列 第 5

【Day5】用CSS為網頁穿上新衣!

  • 分享至 

  • xImage
  •  

如果說html是骨架,那CSS就像是外皮,
首先我們先在css資料夾下建立一個style.css,
然後在html檔的內加入下列,
就可以讓html導入在css資料夾下的CSS檔,為網頁提供樣式。

<link rel="stylesheet" href="css/style.css" type="text/css">

而在CSS內,我們就可以開始指定想要更改樣式的地方,
然後將樣式改變。

header{
    border: 1px solid black;
    height:50px;
}

這樣我們的header就會被黑色的框框圈住。
其中header我們稱之為selector(選擇器)
接著我們要用{}將declartion包起來,方便瀏覽器判讀,
declartion分為propeerty(屬性)和value(數值),
以上面為例,我們將控制border,讓他為1px寬度的實線,顏色為黑色。
在寫完declartion後,加入**;做結尾,
才可再輸入下一個declartion。
最後一個declartion不加入
;一樣有效果,但是容易出問題,
所以還是建議要加入
;**。
第二個declartion則是高度50px的意思。

除了上述的指定方法,
我們還可以利用class或id來指定(通常是用class)
方法如下

.container{
    border: 1px solid black;
    height:50px;
}

這樣則會讓class name為container的標籤,
border為黑色1px的實線、高度為50px。

我們還可以用一些特殊符號來指定想要的element。
例如:

.header+.footer

**+**是「和」的意思,即是class name為header和footer的element都會受影響。

.sidebar~.sidebar

**~**是指「下一個」,也就是說
當遇到第一個.sidebar不會有影響,只影響下一個.sidebar

.header div

空格則是
.header底下的div全部受影響。

.header>div

**>**這是指.header 下一層的div,和上一個不同,只有子層會受影響。


最後
新手在開始寫CSS的時候
會有過於仔細的現象
例如

html樣式

<div class="container">
    <ul class="order-list">
            <li><a href="#"><img src="image/meal01" alt="meal01"></a></li>
            <li><a href="#"><img src="image/meal02" alt="meal02"></a></li>
            <li><a href="#"><img src="image/meal03" alt="meal03"></a></li>
            <li><a href="#"><img src="image/meal04" alt="meal04"></a></li>
            <li><a href="#"><img src="image/meal05" alt="meal05"></a></li>
        </ul>
</div>

CSS樣式

.container>.order-list>li>a>img{
    width:100%;
}

翻譯成中文就是
class name為container,下的class name為order-list,下的li,下的a,下的img
寬度為100%

這是我曾經犯過的錯
其實只要這樣寫即可

.order-list>a{
   width:100%; 
}

兩個寫法都會成功讓圖片寬度變成100%,
但是,第一種寫法會讓權重過高,
導致之後如果有其他地方也要更改樣式(例如製作響應式網頁時)
會無法更改樣式。


上一篇
【DAY4】者工具 DevTools,前端不可或缺的小夥伴!
下一篇
【DAY6】將想要顯示的區域定位到版面上(一)position
系列文
勇者Jason和前端之鑰32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言